<template>
  <a-card :bordered="false">
    <a-form :form="form">
      <a-row>
        <a-col :sm="12" :xs="24">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="来电姓名">
            <a-input
              v-decorator="['name', { rules: [{ required: true, message: '请输入来电姓名', trigger: 'blur' }]
                }]"
              placeholder="请输入来电姓名"
            />
          </a-form-item>
        </a-col>
        <a-col :sm="12" :xs="24">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="来电号码">
            <a-input
              v-decorator="['phone', { rules: [{ required: true, message: '请输入来电号码', trigger: 'blur' }]
                }]"
              placeholder="请输入来电号码"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :sm="12" :xs="24">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="咨询类型">
            <a-select
              v-decorator="['callType', { rules: [{ required: false, message: '请选择咨询类型' }] }]"
              placeholder="请选择咨询类型"
              @select="selectStore"
            >
              <a-select-option
                v-for="item in consultationType"
                :key="item.key"
                :value="item.key"
              >{{ item.value }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :sm="12" :xs="24">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="来电时间">
<!--            <a-input-->
<!--              v-decorator="['callTime', { rules: [{ required: true, message: '请输入来电时间', trigger: 'blur' }]-->
<!--                }]"-->
<!--              placeholder="格式如：2022-01-01 17:19"-->
<!--            />-->
            <a-date-picker showTime format='YYYY-MM-DD HH:mm:ss' v-decorator="['callTime', {initialValue: currentTime, rules: [{ required: true, message: '请选择来电时间'}] }]"
                           style="width: 100%"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :sm="12" :xs="24">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="办理状态">
            <a-select
              v-decorator="['status', { rules: [{ required: false, message: '请选择办理状态' }] }]"
              placeholder="请选择办理状态"
              @select="selectStore"
            >
              <a-select-option
                v-for="item in handlingStatus"
                :key="item.key"
                :value="item.key"
              >{{ item.value }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>

      </a-row>
      <a-row>
        <a-col :sm="12" :xs="24">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="咨询内容">
            <a-textarea v-decorator="['content', { rules: [{ required: false, message: '请输入咨询内容', trigger: 'blur' }]}]"
                        placeholder="请输入咨询内容" :rows="4" style="margin-top: 5px;"/>
          </a-form-item>
        </a-col>
        <a-col :sm="12" :xs="24">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="答复内容">
            <a-textarea v-decorator="['reply', { rules: [{ required: false, message: '请输入答复内容', trigger: 'blur' }]}]"
                        placeholder="请输入答复内容" :rows="4" style="margin-top: 5px;"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :sm="12" :xs="24">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="备注">
            <a-textarea v-decorator="['remark', { rules: [{ required: false, message: '请输入备注', trigger: 'blur' }]}]"
                        placeholder="请输入备注" :rows="4" style="margin-top: 5px;"/>
          </a-form-item>
        </a-col>
      </a-row>

    </a-form>
    <a-row class="BottomButtons">
      <span>
        <a-button @click="handleOk" size="large" type="primary">提交</a-button>
        <!--            <a-button type="default" @click="handleCancel">取消</a-button>-->
      </span>
    </a-row>

    <a-modal v-model="modalShow" :title="modalTitle" ok-text="确认" cancel-text="取消" @ok="hideModal">
      <div style='display: flex;justify-content: center;align-items: center'>
        <p style='word-break: keep-all;margin: 0 30px 0'>模板名称</p>
        <a-input style='width: 300px'/>
      </div>
    </a-modal>
  </a-card>
  <!--  </a-spin>-->
  <!--  </j-modal>-->
</template>

<script>
import { getAction, httpAction } from '@/api/manage'
// import moment from 'moment'
import moment from 'dayjs'
import axios from 'axios'
import qs from 'qs'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { mapGetters } from 'vuex'

export default {
  name: 'NewVehicleRegister',
  components: {


  },
  data() {
    return {
      moment,
      open: false,
      modalShow: false,
      modalTitle: '另存为模板',
      title: '交易信息',
      visible: false,
      model: {},
      noChooseBrand: true,
      loading: '',
      loading2: '',
      loading3: '',
      loading4: '',
      saleSource: [],
      SaleInfosLike: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {},
      url: {
        add: '/cxm/cxmCallInfo/addCallInfo',
        edit: '/sale/cxmSaleCarInfo/editCarInfo'
      },
      showDing: false,
      showEnterpriseUscc: false,
      headers: '',
      picData: {},
      storeName: [],
      storeId: [],
      consultationType: [
        {
          key: 0,
          value: '购车前的网签咨询'
        }, {
          key: 1,
          value: '订单'
        }, {
          key: 2,
          value: '合同'
        }, {
          key: 3,
          value: '交付'
        }, {
          key: 4,
          value: '网签后的售后服务'
        }, {
          key: 5,
          value: '其他'
        }
      ],
      handlingStatus: [
        {
          key: 0,
          value: '待处理'
        }, {
          key: 1,
          value: '已处理'
        }
      ],
      storekeeperName: [],
      storekeeperId: [],
      checkboxgroupvalue: [],
      checkboxgroupvalue2: [],
      brandList: [],
      brandListAll: [],
      colorList: [],
      carModel: [],
      carModelAll: [],
      inColorList: [],
      supplierList: {},
      manufacturerList: {},
      shouxuList: [],
      zhuangbeiList: [],
      appearanceImg: '',
      qrCodeImg: '',
      nameplateImg: '',
      certificateImg: '',
      currentTime: ''
    }
  },
  created() {
    const token = Vue.ls.get(ACCESS_TOKEN)
    this.headers = { 'X-Access-Token': token, 'Content-Type': 'application/x-www-form-urlencoded' }
    this.getCurrentData()
  },
  methods: {
    ...mapGetters(['nickname', 'avatar', 'userInfo']),
    showModal() {
      this.modalShow = true
    },
    hideModal() {
      this.modalShow = false
    },
    handleTimeClose(){
      this.open = false
    },
    getCurrentData() {
      if (this.currentTime === '') {
        this.currentTime = moment().format('YYYY-MM-DD HH:mm:ss')
      }
    },

    add(record) {
      console.log(record)
      this.edit(record)
    },
    edit(record) {

      this.form.resetFields()
      this.model = Object.assign({}, record)
      console.log(this.model)
      this.$nextTick(() => {

        this.form.setFieldsValue({
          /* 基本信息： */
          supplier: this.model.supplier,
          manufacturer: this.model.manufacturer,
          storeId: this.model.storeId,
          storekeeperId: this.model.storekeeperId,
          /* 车辆信息： */
          vin: this.model.vin,
          certificateNo: this.model.certificateNo,
          brand: this.model.brand,
          carModel: this.model.carModel,
          carTypeConfiguration: this.model.carTypeConfiguration,
          powerType: this.model.powerType,
          fuelType: this.model.fuelType,
          outsideColor: this.model.outsideColor,
          interiorColor: this.model.interiorColor,
          engineModel: this.model.engineModel,
          engineNo: this.model.engineNo,
          displacement: this.model.displacement,
          gearbox: this.model.gearbox,
          tireNo: this.model.tireNo,
          passengerCapacity: this.model.passengerCapacity ? String(this.model.passengerCapacity) : null,
          motorPower: this.model.motorPower,
          emissionStandards: this.model.emissionStandards,
          wheelbase: this.model.wheelbase,
          loadQuality: this.model.loadQuality,
          batteryNo: this.model.batteryNo,
          /* 上传图片 ： */
          appearanceImg: this.model.appearanceImg,
          qrCodeImg: this.model.qrCodeImg,
          nameplateImg: this.model.nameplateImg,
          certificateImg: this.model.certificateImg
        })
      })
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {

        if (!err) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'post'
          }
          let formData = Object.assign(this.model, values)
          //时间格式化
          console.log(formData.callTime)
          // formData.callTime = formData.callTime ? formData.callTime : null
          if (formData.callTime && formData.callTime.length > 0) {
            formData.callTime = this.model.callTime
          }else{
            formData.callTime = null
          }


          //formData.shouxuList = this.checkboxgroupvalue;
          httpAction(httpurl, formData, method)
            .then((res) => {
              console.log(res)
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
                this.reset()
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
              this.noChooseBrand = true
              console.log(this.model)
            })
        }
      })
    },
    reset(){
      this.form.resetFields()
      this.model = {}
      this.imageUrl = ''
      this.imageUrl2 = ''
      this.imageUrl3 = ''
      this.imageUrl4 = ''
      this.qrCodeImg = ''
      this.nameplateImg = ''
      this.certificateImg = ''
    },
    handleCancel() {
      this.close()
    },
    selectStore(a) {
      console.log(a)
    },
    onChange(checkedValues) {
      console.log('checked = ', checkedValues)
      console.log('value = ', this.value)
    },
    onChange2(checkedValues) {
      console.log('checked = ', checkedValues)
      console.log('value = ', this.value)
    },
    changeBrand(value) {
      this.carModel = []
      this.form.setFieldsValue({
        'carModel': []
      })
      this.noChooseBrand = false
      for (let i = 0; i < this.brandListAll.length; i++) {
        if (this.brandListAll[i].name == value) {
          for (let j = 0; j < this.carModelAll.length; j++) {
            if (this.carModelAll[j].parentId == this.brandListAll[i].id) {
              this.carModel.push(this.carModelAll[j].name)
            }
          }
        }
      }
    }
  },
  filters: {
    filterTime(time) {
      return moment(time).format('YYYY-MM-DD')
    },
    filterDepositAttribute(depositAttribute) {
      switch (depositAttribute) {
        case '1':
          return '可退'
          break
        case '2':
          return '不可退'
          break
        case '3':
          return '有条件可退'
          break
      }
    }
  }
}
</script>

<style scoped>
.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}

.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.ant-upload-select-picture-card img {
  width: 128px;
  height: 128px;
}

.BottomButtons {
  text-align: center;
  margin-top: 70px;
}

.titleText {
  margin: 0 0 15px 5%;
}
</style>